<template>
  <div class="form-input">
    <div>
      <b-form @submit="onSubmit" @reset="onReset" v-if="show" autocomplete="off">
        <!-- user name -->
        <b-form-group id="input-group-username" label="用户名:" label-for="input-name" :state="stateName" :invalid-feedback="invalidFeedbackName">
          <b-form-input :state="stateName" id="input-name" v-model="form.strUsrName" required placeholder="Enter name"></b-form-input>
        </b-form-group>

        <!-- password -->
        <b-form-group
          id="input-group-password"
          label="密码:"
          label-for="input-pw"
          :invalid-feedback="invalidFeedbackPassword"
          :state="statePassword"
        >
          <b-form-input
            :state="statePassword"
            id="input-pw"
            v-model="form.strPassword"
            type="password"
            required
            placeholder="Enter Password"
          ></b-form-input>
        </b-form-group>

        <!-- password check -->
        <b-form-group
          id="input-group-pc"
          label="确认密码:"
          label-for="input-pwc"
          :state="statePasswordConfirm"
          :invalid-feedback="invalidFeedbackPasswordConfirm"
        >
          <b-form-input :state="statePasswordConfirm" id="input-pwc" v-model="form.strPasswordCheck" type="password" required placeholder="Confirm Password"></b-form-input>
        </b-form-group>

        <!-- user organization -->
        <b-form-group id="input-group-org" label="所属机构:" label-for="input-org">
          <b-form-input id="input-org" v-model="form.strOrganization" required placeholder="Enter Organization Name"></b-form-input>
        </b-form-group>

        <!-- email -->
        <b-form-group 
          id="input-group-email"
          label-for="input-email"
          label="邮箱:"
          description="We'll never share your email with anyone else."
        >
          <b-form-input id="input-email" v-model="form.strEmail" type="email" required placeholder="Enter email"></b-form-input>
        </b-form-group>
        
        <!-- tel -->
        <b-form-group
          id="input-group-tel" 
          label-for="input-tel" 
          label="手机（选填）:" 
          :invalid-feedback="invalidFeedbackTel"
          :valid-feedback="validFeedbackTel"
          :state="stateTel"
        >
          <b-form-input :state="stateTel" id="input-tel" v-model="form.strTel" placeholder="Enter Phone Number" type="tel"></b-form-input>
        </b-form-group>

        <!-- button area -->
        <b-button class="m-right-20" type="submit" variant="primary">提交</b-button>
        <b-button type="reset" variant="danger">重置</b-button>
      </b-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "form-input",
  data() {
    return {
      form: {
        strUsrName: "",
        strPassword: "",
        strPasswordCheck: "",
        strOrganization: "",
        strEmail: "",
        strTel: ""
      },

      show: true
    };
  },
  computed: {
      /* telephone number */
      stateTel() {
        if ( !!this.form.strTel ) {
          return this.form.strTel.length == 11 ? true : false
        } else {
          return null
        }
      },
      invalidFeedbackTel() {
        if (this.form.strTel.length == 11) {
          return ''
        } else if (this.form.strTel.length < 11) {
          return '请输入11位手机号码'
        } else {
          return '请输入11位手机号码'
        }
      },
      validFeedbackTel() {
        return this.stateTel === true ? 'success' : ''
      },
      /* password */
      statePassword() {
        if (!!this.form.strPassword) {
          return ((this.form.strPassword.length >= 8 && this.form.strPassword.length <= 24)) ? true : false
        } else {
          return null
        }
      },
      invalidFeedbackPassword() {
          if ( this.form.strPassword.length == 0 ) {
              return ""
          } else if( this.form.strPassword.length < 8 ) {
              return "密码长度不可小于 8 位"
          } else {
              return "密码长度不可超过 24 位"
          }
      },
      /* password confirm */
      statePasswordConfirm() {
        if (!!this.form.strPasswordCheck) {
          return ( this.form.strPassword == this.form.strPasswordCheck ) ? true : false
        } else {
          return null
        }
      },
      invalidFeedbackPasswordConfirm() {
        return "两次输入密码不一致"
      },
      /* user name */
      stateName() {
        if (!!this.form.strUsrName) {
          return this.form.strUsrName.length <= 24 ? true : false
        } else {
          return null
        }
      },
      invalidFeedbackName() {
        return "用户名长度不可超过24位"
      }

    },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
    },
    onReset(evt) {
      evt.preventDefault();
      // Reset our form values
      this.form.strUsrName = "";
      this.form.strPassword = "";
      this.form.strPasswordCheck = "";
      this.form.strOrganization = "";
      this.form.strEmail = "";
      this.form.strTel = "";

      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .m-right-20{
    margin-right: 20px;
  }
</style>



